import { createApp } from 'vue'
import CustomMessage from '@/components/CustomMessage.vue'
import CustomMessageBox from '@/components/CustomMessageBox.vue'

// 消息提示
export const Message = {
  success(message: string, duration = 3000) {
    showMessage(message, 'success', duration)
  },
  
  error(message: string, duration = 3000) {
    showMessage(message, 'error', duration)
  },
  
  warning(message: string, duration = 3000) {
    showMessage(message, 'warning', duration)
  },
  
  info(message: string, duration = 3000) {
    showMessage(message, 'info', duration)
  }
}

function showMessage(message: string, type: 'success' | 'error' | 'warning' | 'info', duration: number) {
  const container = document.createElement('div')
  document.body.appendChild(container)
  
  const app = createApp(CustomMessage, {
    message,
    type,
    duration,
    onClose: () => {
      app.unmount()
      document.body.removeChild(container)
    }
  })
  
  app.mount(container)
}

// 确认对话框
export const MessageBox = {
  confirm(
    message: string, 
    title = '确认', 
    options: {
      confirmButtonText?: string
      cancelButtonText?: string
      type?: 'warning' | 'info' | 'error' | 'question'
    } = {}
  ): Promise<void> {
    return new Promise((resolve, reject) => {
      const container = document.createElement('div')
      document.body.appendChild(container)
      
      const cleanup = () => {
        app.unmount()
        document.body.removeChild(container)
      }
      
      const app = createApp(CustomMessageBox, {
        message,
        title,
        type: options.type || 'warning',
        confirmButtonText: options.confirmButtonText || '确定',
        cancelButtonText: options.cancelButtonText || '取消',
        onConfirm: () => {
          cleanup()
          resolve()
        },
        onCancel: () => {
          cleanup()
          reject('cancel')
        }
      })
      
      app.mount(container)
    })
  }
}
